
<template>
  <div style="width: 500px; height: 400px;position: relative;">
    <canvas ref="canvas" width="400" height="300" class="canvas">
      
    </canvas>
    <div class="asb" @click="an">12121</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      xianduan: [
        {
          StartpointX: 50,
          StartpointY: 50,
          EndPointX: 350,
          EndPointY: 50,
          color: "bule",
          lineWidth: "3",
          zhi: 100,
        },
        {
          a: 350,
          b: 50,
          c: 350,
          d: 100,
          color: "green",
          lineWidth: "3",
          zhi: 666,
        },
        {
          a: 350,
          b: 100,
          c: 1111,
          d: 1111,
          color: "yellow",
          lineWidth: "2",
          zhi: 1000,
        },
        {
          a: 50,
          b: 50,
          c: 350,
          d: 50,
          color: "yellow",
          lineWidth: "2",
          zhi: 1000,
        },
      ],
      yuan1:[
        {a:50,b:55,c:50, d:0, e:2,color:'red'},
        {a:200,b:75,c:50, d:0, e:2,color:'green'}
      ]
    };
  },
  mounted() {
    this.drawLines();
    this.yuan();
  },
  methods: {
    an(){
    console.log(111111);
    },
    yuan() {
      const canvas = this.$refs.canvas;
      var ctx = canvas.getContext("2d");
      //开始路径绘制
    
      
      
      //绘制圆
      this.yuan1.forEach(item=>{
        ctx.beginPath();
        ctx.arc(item.a, item.b, item.c, item.d, item.e * Math.PI);
        ctx.strokeStyle = item.color;//'#ff4444';
			ctx.stroke();

      })
     
    
    },
    drawLines() {
      // console.log(this.canvas);
      this.xianduan.forEach((item) => {
        // console.log(item);
        const canvas = this.$refs.canvas;
        const ctx = canvas.getContext("2d");

        ctx.beginPath();
        ctx.moveTo(item.a, item.b);
        ctx.lineTo(item.c, item.d);
        ctx.strokeStyle = item.color;
        ctx.lineWidth = item.lineWidth;
        ctx.stroke();

        // if (item.zhi >= 500) {
        //   console.log(item, ctx);
        //   alert("报警" + item.zhi);
        //   ctx.strokeStyle = "red";
        //   ctx.stroke(); //
        // }
        // ctx.onclick = function (e) {
        //   console.log(1111111111);
        // };
      });
    },
  },
};
</script>
<style scoped less="less">
.canvas {
  width: 500px;
  height: 300px;
  
}
.asb{
  position: absolute;
  top: 100px;
  left: 300px;
  color: red;
  z-index: 111;
}
</style>